<template>
      <el-form
          :model="form"
          :label-width="80"
          status-icon
      >
        <el-form-item label="会员姓名" >
          <el-input v-model="form.name" placeholder="会员姓名"/>
        </el-form-item>
        <el-form-item label="手机号" >
          <el-input v-model="form.tel" placeholder="手机号" />
        </el-form-item>
        <el-form-item label="性别" >
           <el-radio v-model="form.gender" value="男" size="large">男
            </el-radio>
            <el-radio v-model="form.gender" value="女" size="large">女
            </el-radio>
        </el-form-item>
           <el-form-item label="出生日期" >
              <el-date-picker
                v-model="form.birthday"
                type="date"
                placeholder="yyyy-mm-dd"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                style="width: 100%"
            />
            </el-form-item>
               <el-form-item label="备注" >
              <el-input v-model="form.remark" type="textarea" />
            </el-form-item>
             <el-form-item v-if="type=='add'">
                <el-button type="primary"  @click="saveMemberContinue">保存,为该会员当定会员卡</el-button>
                <el-button   @click="saveMember">保存会员信息，暂不绑定会员卡</el-button>
               <el-button @click="cancelForm">取消</el-button>
          </el-form-item>
            <el-form-item v-else>
                <el-button type="primary"  @click="editMember">保存</el-button>
               <el-button @click="cancelForm">取消</el-button>
           </el-form-item>
      </el-form>
</template>

<script setup>
import { ref, reactive, defineEmits, defineProps } from 'vue';
import { addMember, updateMember, getMemberInfo } from '@/api/member'; // 导入 API 方法
import { ElMessage } from 'element-plus';
import { onMounted } from 'vue';

 const {form,active} = defineProps(['form','active','drawer','editMemberDrawer','type'])
 console.log(form)
 //自定义事件
 const $emit = defineEmits(['update:active','update:drawer','update:editMemberDrawer'])

 // 原始数据
const originalData = ref([]);
const pageData = reactive({
  pageCurrent: 1,
  pageSize: 3,
  pageTotal: 0, // 默认设置为 0
});

const tableData = ref([]);

onMounted(() => {
  getMemberInfo().then(res => {
        originalData.value = res.data.data;
        pageData.pageTotal = originalData.value.length; // 设置总条数
        updateTableData(); // 更新表格数据
    });
});

// 更新表格数据的函数
const updateTableData = () => {
  const start = (pageData.pageCurrent - 1) * pageData.pageSize;
  const end = start + pageData.pageSize;
  tableData.value = originalData.value.slice(start, end);
};

// 分页处理
const handleCurrentChange = (val) => {
  pageData.pageCurrent = val;
  updateTableData(); // 每次页码变化时更新表格数据
};

// 加载会员数据
const loadMembers = () => {
  getMemberInfo().then(res => {
    originalData.value = res.data.data;
    pageData.pageTotal = originalData.value.length;
    updateTableData();
  });
};

//表单的验证规则
// const rules = reactive({
//     name: [
//         { required: true, message: '请输入会员姓名', trigger: 'blur' },
//         { min: 3, max: 5, message: '长度在 3 to 5', trigger: 'blur' },
//     ],
//     tel: [
//         {
//             required: true,
//             message: 'Please select Activity count',
//             trigger: 'change',
//         },
//     ],

//     gender: [
//         {
//             required: true,
//             message: 'Please select activity resource',
//             trigger: 'change',
//         },
//     ],
// })

// 保存会员信息并绑定会员卡
const saveMemberContinue = async () => {
  try {
    const response = await addMember({
      id: form.id,
      name: form.name, // 映射到 customerName
      phone: form.tel,        // 映射到 phone
      sex: form.gender,
      birthday: form.birthday,   // 映射到 birth
      note: form.remark       // 映射到 note
    });
    if (response.status === 200) {
      ElMessage({
        type: 'success',
        message: '会员信息保存成功',
      });
      $emit('update:active', 2); // 跳转到绑定会员卡的表单
    } else {
      ElMessage({
        type: 'error',
        message: '保存失败',
      });
    }
  } catch (error) {
    console.error('保存会员信息失败:', error);
    ElMessage({
      type: 'error',
      message: '保存会员信息请求出错',
    });
  }
};

// 保存会员信息但不绑定会员卡
const saveMember = async () => {
  try {
    const response = await addMember({
      id: form.id,
      name: form.name, // 映射到 customerName
      phone: form.tel,        // 映射到 phone
      sex: form.gender,
      birthday: form.birthday,   // 映射到 birth
      note: form.remark       // 映射到 note
    });
    if (response.status === 200) {
      ElMessage({
        type: 'success',
        message: '会员信息保存成功',
      });
      $emit('update:drawer', false); // 关闭抽屉
      loadMembers();    //重载会员数据
    } else {
      ElMessage({
        type: 'error',
        message: '保存失败',
      });
    }
  } catch (error) {
    console.error('保存会员信息失败:', error);
    ElMessage({
      type: 'error',
      message: '保存会员信息请求出错',
    });
  }
};

// 取消表单
const cancelForm = () => {
  $emit('update:drawer', false);
  $emit('update:editMemberDrawer', false);
};

// 更新会员信息
const editMember = async () => {
  try {
    const response = await updateMember({
      id: form.id,
      name: form.name, // 映射到 customerName
      phone: form.tel,        // 映射到 phone
      sex: form.gender,
      birthday: form.birthday,   // 映射到 birth
      note: form.remark       // 映射到 note
    });
    if (response.status === 200) {
      ElMessage({
        message: '修改成功',
        type: 'success'
      });
      $emit('update:editMemberDrawer', false); // 关闭抽屉
      loadMembers();    //重载会员数据
    } else {
      ElMessage({
        type: 'error',
        message: '修改失败',
      });
    }
  } catch (error) {
    console.error('修改会员信息失败:', error);
    ElMessage({
      type: 'error',
      message: '修改会员信息请求出错',
    });
  }
};
</script >
<style lang="less" scoped>
</style>